<template>
    <div class='container' ref='container'>
        <button class='history'>历史订单</button>
        <div class='language'><button class='ch'>中</button><button class='en'>En</button></div>
        <div class='last'><button class='out'>登出</button></div>
    </div>
</template>

<script>
export default {
  mounted() {
    document.addEventListener('click', this.remove);
  },
  methods: {
    remove(e) {
      // 获取真实Dom
      if (this.$refs.container && !this.$refs.container.contains(e.target)) {
        this.$emit('remove');
      }
    },
  },
  beforeDestory() {
    document.removeEventListener('click', this.remove);
  },
};
</script>

<style lang="scss" scoped>
    .container{
        width: 248px;
        height: 190px;
        background-color: rgb(250, 250, 250);
        margin-left:550px;
        box-shadow: 2px 2px 2px rgb(195, 194, 194);
        border-radius: 5px;
    }
    .history{
        background-color: rgb(41, 41, 41);
        color: aliceblue;
        border-radius: 10px;
        width: 180px;
        margin-top: 20px;
        margin-left:40px
    }
    .language{
        margin-top:25px;
        display: flex;
        justify-content: space-around;
        align-content: center;
    }
    .last{
        margin-top:25px;
        margin-left:40px
    }
    .out{
        width: 180px;
        background-color: rgb(41, 41, 41);
        border-radius: 10px;
        color: rgb(255, 255, 255);
        cursor: pointer;
    }
    .ch{
        border-radius: 150px;
        cursor: pointer;
        color:aliceblue;
        background-color:  rgb(41, 41, 41);
    }
    .en{
        border-radius: 150px;
        cursor: pointer;
    }
</style>
